extends ../main

block append body
    div.menu_setting_box.js_menuBox.dn(style="display: block;")
        div.menu_setting_area.js_editBox
            div.menu_preview_area
                div.mobile_menu_preview
                    div.mobile_hd.tc {{gzh_name}}
                    div.mobile_bd
                        ul#menuList.pre_menu_list.grid_line.ui-sortable.ui-sortable-disabled.no_menu(style="z-index:3")
                            li.jsMenu.pre_menu_item.grid_item.jslevel1.size1of3.ui-sortable.ui-sortable-disabled(v-for="(btn,index) in menu.button",:key="btn.id")
                                a(href="javascript:void(0);",@click="menu_selected(btn.name,index)",:class="[{pre_menu_link: index===activeMenuIndex && activeMenuType()==1}]",draggable="false")
                                    i.icon_menu_dot.js_icon_menu_dot.dn
                                    i.icon20_common.sort_gray
                                    span.js_l1Title {{ btn.name }}
                                div.sub_pre_menu_box.js_l2TitleBox(v-if="index===activeMenuIndex")
                                    ul.sub_pre_menu_list
                                        li.jslevel2(v-for="(sub,index) in btn.sub_button",:key="sub.id")
                                            a.jsSubView(href="javascript:void(0);",@click="menu_item_selected(sub.name,index)",:class="[{pre_menu_link: index===activeMenuItemIndex && activeMenuType()==2}]",draggable="false")
                                                span.sub_pre_menu_inner.js_sub_pre_menu_inner
                                                    i.icon20_common.sort_gray
                                                    span.js_l2Title {{ sub.name }}
                                        li.js_addMenuBox(v-if="isSet(menu.button[activeMenuIndex].sub_button)&&btn.sub_button.length>=0&&btn.sub_button.length<5")
                                            a.jsSubView.js_addL2Btn(href="javascript:void(0);",title="最多添加5个子菜单",@click="menu_item_add()",draggable="false")
                                                span.sub_pre_menu_inner.js_sub_pre_menu_inner
                                                    i.icon14_menu_add
                                    i.arrow.arrow_out
                                    i.arrow.arrow_in
                            li.js_addMenuBox.pre_menu_item.grid_item.no_extra.size1of1
                                a.js_addL1Btn(href="javascript:void(0);",v-if="isSet(menu.button)?(menu.button.length>=0&&menu.button.length<3):false",@click="menu_add()",:class="[{pre_menu_link: activeMenuIndex===''}]",title="最多添加3个一级菜单",draggable="false")
                                    i.icon14_menu_add
                                    span.js_addMenuTips 添加菜单
            div.menu_form_area
                div#js_none.menu_initial_tips.tips_global(style="display: none;")
                div#js_rightBox.portable_editor.to_left(style="display: none;",v-show="activeMenuIndex > 0 || activeMenuIndex === 0 || activeMenuItemIndex > 0 || activeMenuIndex === 0 ")
                    div.editor_inner
                        div.global_mod.float_layout.menu_form_hd.js_second_title_bar
                            h4.global_info  菜单名称
                            div.global_extra
                                a#jsDelBt(href="javascript:void(0);",@click="menu_del()",v-if="showDelBtnType===1") 删除菜单
                                a#jsDelBt(href="javascript:void(0);",@click="menu_item_del()",v-if="showDelBtnType===2") 删除子菜单
                        div#view.menu_form_bd
                            div#js_innerNone.msg_sender_tips.tips_global(style="display:none;")
                            div.frm_control_group.js_setNameBox
                                label.frm_label(for="")
                                    strong.title.js_menuTitle 菜单名称
                                div.frm_controls
                                    span.frm_input_box.with_counter.counter_in.append(v-if="activeMenuType() == 1 && isSet(menu.button[activeMenuIndex])")
                                        input.frm_input.js_menu_name(type="text",v-model="menu.button[activeMenuIndex].name")
                                    span.frm_input_box.with_counter.counter_in.append(v-if="activeMenuType() == 2 && isSet(menu.button[activeMenuIndex].sub_button[activeMenuItemIndex])")
                                        input.frm_input.js_menu_name(type="text",v-model="menu.button[activeMenuIndex].sub_button[activeMenuItemIndex].name")
                                    p.frm_msg.fail.js_titleEorTips.dn 字数超过上限
                                    p.frm_msg.fail.js_titlenoTips.dn(style="display: none;") 请输入菜单名称
                                    P.frm_tips.js_titleNolTips 字数不超过4个汉字或8个字母
                            div.frm_control_group(v-show="((activeMenuIndex > 0 || activeMenuIndex === 0) && (menu.button[activeMenuIndex].sub_button.length == 0)) || (activeMenuItemIndex > 0 || activeMenuItemIndex === 0) ",style="display: none;")
                                label.frm_label(for="")
                                    strong.title.js_menuContent 菜单内容
                                div.frm_controls.frm_vertical_pt
                                    label.frm_radio_label.js_radio_sendMsg(@click="radio_label_selected(1)",:class="[{selected:showMenuContentType===1}]",data-editing="0")
                                        i.icon_radio
                                        span.lbl_content 发送消息
                                        input.frm_radio(type="radio",name="hello")
                                    label.frm_radio_label.js_radio_url(@click="radio_label_selected(2)",:class="[{selected:showMenuContentType===2}]",data-editing="0")
                                        i.icon_radio
                                        span.lbl_content 跳转网页
                                        input.frm_radio(type="radio",name="hello")
                            div.menu_content_container
                                div#edit.menu_content.send.jsMain(v-show="showMenuContentType===1",style="display: none;")
                                    div#editDiv.msg_sender
                                        div.msg_tab
                                            div.tab_navs_panel
                                                span.tab_navs_switch_wrp.switch_prev.js_switch_prev
                                                    span.tab_navs_switch
                                                span.tab_navs_switch_wrp.switch_next.js_switch_next(style="display: none;")
                                                    span.tab_navs_switch
                                                div.tab_navs_wrp(style="width: 650px")
                                                    ul.tab_navs.js_tab_navs(style="margin-left:0;")
                                                        li.tab_nav.tab_appmsg.width4(:class="[{selected:showMenuContentMsgType===1}]",data-type="10",data-tab=".js_appmsgArea",data-tooltip="图文消息")
                                                            a(href="javascript:void(0);",@click="content_msg_tab_nav(1)") &nbsp;
                                                                i.icon_msg_sender
                                                                span.msg_tab_title 图文消息
                                                        li.tab_nav.tab_img.width4(:class="[{selected:showMenuContentMsgType===2}]",data-type="2",data-tab=".js_imgArea",data-tooltip="图片")
                                                            a(href="javascript:void(0);",@click="content_msg_tab_nav(2)") &nbsp;
                                                                i.icon_msg_sender
                                                                span.msg_tab_title 图片
                                                        li.tab_nav.tab_audio.width4(:class="[{selected:showMenuContentMsgType===3}]",data-type="3",data-tab=".js_audioArea",data-tooltip="语音")
                                                            a(href="javascript:void(0);",@click="content_msg_tab_nav(3)") &nbsp;
                                                                i.icon_msg_sender
                                                                span.msg_tab_title 语音
                                                        li.tab_nav.tab_video.width4.no_extra(:class="[{selected:showMenuContentMsgType===4}]",data-type="15",data-tab=".js_videoArea",data-tooltip="视频")
                                                            a(href="javascript:void(0);",@click="content_msg_tab_nav(4)") &nbsp;
                                                                i.icon_msg_sender
                                                                span.msg_tab_title 视频
                                                div.tab_panel
                                                    div.tab_content(v-show="showMenuContentMsgType===1",style="display: none;")
                                                        div.js_appmsgArea.inner
                                                            div.tab_cont_cover.jsMsgSendTab(data-index="0")
                                                                div.media_cover
                                                                    span.create_access
                                                                        a.add_gray_wrp.jsMsgSenderPopBt(href="javascript:void(0);",data-type="10",data-index="0")
                                                                            i.icon36_common.add_gray
                                                                            strong 从素材库中选择
                                                                div.media_cover
                                                                    span.create_access
                                                                        a.add_gray_wrp(target="_blank",href="javascript:void(0);")
                                                                            i.icon36_common.add_gray
                                                                            strong 新建图文消息
                                                    div.tab_content(v-show="showMenuContentMsgType===2",style="display: none;")
                                                        div.js_imgArea.inner
                                                            div.tab_cont_cover.jsMsgSendTab(data-index="1",data-type="2")
                                                                div.media_cover
                                                                    span.create_access
                                                                        a.add_gray_wrp.jsMsgSenderPopBt(href="javascript:void(0);",data-type="2",data-index="1")
                                                                            i.icon36_common.add_gray
                                                                            strong 从素材库中选择
                                                                div.media_cover
                                                                    span.create_access
                                                                        a.add_gray_wrp#msgSendImgUploadBt(data-type="2",href="javascript:void(0);")
                                                                            i.icon36_common.add_gray
                                                                            strong 上传图片
                                                    div.tab_content(v-show="showMenuContentMsgType===3",style="display: none;")
                                                        div.js_audioArea.inner
                                                            div.tab_cont_cover.jsMsgSendTab(data-index="2",data-type="3")
                                                                div.media_cover
                                                                    span.create_access
                                                                        a.add_gray_wrp.jsMsgSenderPopBt(href="javascript:void(0);",data-type="3",data-index="2")
                                                                            i.icon36_common.add_gray
                                                                            strong 从素材库中选择
                                                                div.media_cover
                                                                    span.create_access
                                                                        a#msgSendAudioUploadBt.add_gray_wrp(href="javascript:void(0);")
                                                                            i.icon36_common.add_gray
                                                                            strong 新建语音
                                                    div.tab_content(v-show="showMenuContentMsgType===4",style="display: none;")
                                                        div.js_videoArea.inner
                                                            div.tab_cont_cover.jsMsgSendTab(data-index="3")
                                                                div.media_cover
                                                                    span.create_access
                                                                        a.add_gray_wrp.jsMsgSenderPopBt(href="javascript:void(0);",data-type="15",data-index="3")
                                                                            i.icon36_common.add_gray
                                                                            strong 从素材库中选择
                                                                div.media_cover
                                                                    span.create_access
                                                                        a.add_gray_wrp(target="_blank",href="javascript:void(0);")
                                                                            i.icon36_common.add_gray
                                                                            strong 新建视频
                                div#url.menu_content.url.jsMain(v-show="showMenuContentType===2",style="display: none;")
                                    form#urlForm(action="",onsubmit="return false;")
                                        p.menu_content_tips.tips_global 订阅者点击该子菜单会跳到以下链接
                                        div.frm_control_group
                                            label(for="",class="frm_label") 页面地址
                                            div.frm_controls
                                                span.frm_input_box(v-if="activeMenuType() == 1")
                                                    input#urlText.frm_input(type="text",name="urlText",v-model="menu.button[activeMenuIndex].url")
                                                span.frm_input_box(v-if="activeMenuType() == 2")
                                                    input#urlText.frm_input(type="text",name="urlText",v-model="menu.button[activeMenuIndex].sub_button[activeMenuItemIndex].url")
                                                p.profile_link_msg_global.menu_url.mini_tips.warn.dn.js_warn 请勿添加其他公众号的主页链接
                                                p#js_urlTitle.frm_tips(style="display: none;") 来自
                                                    span.js_name
                                                    span(style="display:none;") -《
                                                        span.js_title
                                                        | 》
                                        div.frm_control_group.btn_appmsg_wrap
                                            div.frm_controls
                                                p#urlUnSelect.frm_msg.fail.dn(style="display: none;")
                                                    span.frm_msg_content(for="urlText",style="display: inline;") 请选择一篇文章
                                                a#js_appmsgPop(href="javascript:void(0);") 从公众号图文消息中选择
                                                a#js_reChangeAppmsg.dn.btn.btn_default(href="javascript:void(0);") 重新选择
                                div.menu_content.sended(style="display:none;")
                                    p.menu_content_tips.tips_global 订阅者点击该子菜单会跳到以下链接
                                    div#viewDiv.msg_wrp
                                    p.frm_tips 来自
                                        span.js_name 素材库
                                        span(style="display:none;") -《
                                            span.js_title
                                            | 》
                                div#js_errTips.msg_sender_msg.mini_tips.warn(style="display:none;")
                    span.editor_arrow_wrp
                        i.editor_arrow.editor_arrow_out
                        i.editor_arrow.editor_arrow_in
        div.tool_bar.tc.js_editBox
            span#pubBt.btn.btn_input.btn_primary(style="display: block;",@click="saveData()")
                button 保存并发布
block append footer
    script(type="text/javascript").
        var app = new Vue({
            el: '.menu_setting_box.js_menuBox',
            data: function () {
                return {
                    "gzh_name": '实时预览',
                    //                    "menu":{"button":[{"type":"view","name":"今日歌曲","key":"V1001_TODAY_MUSIC","url":"","sub_button":[]},{"type":"click","name":"歌手简介","key":"V1001_TODAY_SINGER","sub_button":[]},{"name":"菜单","sub_button":[{"type":"view","name":"搜索","url":"http://www.soso.com/","sub_button":[]},{"type":"view","name":"视频","url":"http://v.qq.com/","sub_button":[]},{"type":"click","name":"赞一下我们","key":"V1001_GOOD","sub_button":[]}]}]},
                    "menu": {
                        "button": [
                            {"type": "click", "name": "歌手简介", "key": "V1001_TODAY_SINGER", "url": "", "sub_button": []},
                            {
                                "name": "菜单", "sub_button": [
                                {
                                    "type": "view",
                                    "name": "搜索",
                                    "key": "",
                                    "url": "http://www.soso.com/",
                                    "sub_button": []
                                },
                                {"type": "view", "name": "视频", "key": "", "url": "http://v.qq.com/", "sub_button": []},
                                {"type": "click", "name": "赞一下我们", "key": "V1001_GOOD", "url": "", "sub_button": []}
                            ]
                            }
                        ]
                    },
                    //                    "menu":{'button':[]},
                    "new_menu": {'button': []},
                    "activeMenuName": '',
                    "activeMenuIndex": '',
                    "activeMenuItemName": '',
                    "activeMenuItemIndex": '',
                    "showDelBtnType": '', //1:delMenu 2:delMenuItem
                    "showMenuContentType": '', //1:发送消息 2:跳转链接
                    "showMenuContentMsgType": '' //1:图文信息 2:图片 3:语音 4:视频
                }
            },
            methods: {
                menu_data_completing: function () {
                    for (var i = 0; i < this.menu.button.length; i++) {
                        if (!('type' in this.menu.button[i])) {
                            this.menu.button[i].type = 'click';
                        }
                        if (!('name' in this.menu.button[i])) {
                            this.menu.button[i].name = '';
                        }
                        if (!('key' in this.menu.button[i])) {
                            this.menu.button[i].key = '';
                        }
                        if (!('url' in this.menu.button[i])) {
                            this.menu.button[i].url = '';
                        }
                        if (!('sub_button' in this.menu.button[i])) {
                            this.menu.button[i].sub_button = [];
                        }
                        if (this.menu.button[i].sub_button.length > 0) {
                            for (var j = 0; j < this.menu.button[i].sub_button.length; j++) {
                                if (!('type' in this.menu.button[i].sub_button[j])) {
                                    this.menu.button[i].sub_button[j].type = 'click';
                                }
                                if (!('name' in this.menu.button[i].sub_button[j])) {
                                    this.menu.button[i].sub_button[j].name = '';
                                }
                                if (!('key' in this.menu.button[i].sub_button[j])) {
                                    this.menu.button[i].sub_button[j].key = '';
                                }
                                if (!('url' in this.menu.button[i].sub_button[j])) {
                                    this.menu.button[i].sub_button[j].url = '';
                                }
                                if (!('sub_button' in this.menu.button[i].sub_button[j])) {
                                    this.menu.button[i].sub_button[j].sub_button = [];
                                }
                            }
                        }
                    }
                },
                saveData: function () {
                    //补全数据,无数据也要为空
                    this.menu_data_completing();
                    console.log(this.menu);
                    for (var i = 0; i < this.menu.button.length; i++) {
                        if (this.menu.button[i].sub_button.length > 0) {
                            var _sub_button = [];
                            for (var j = 0; j < this.menu.button[i].sub_button.length; j++) {
                                if (this.menu.button[i].sub_button[j].type == 'click') {
                                    _sub_button[j] = {
                                        "type": this.menu.button[i].sub_button[j].type,
                                        "name": this.menu.button[i].sub_button[j].name,
                                        "key": this.menu.button[i].sub_button[j].key
                                    };
                                } else if (this.menu.button[i].sub_button[j].type == 'view') {
                                    _sub_button[j] = {
                                        "type": this.menu.button[i].sub_button[j].type,
                                        "name": this.menu.button[i].sub_button[j].name,
                                        "url": this.menu.button[i].sub_button[j].url
                                    };
                                }
                            }
                            if (this.menu.button[i].type == 'click') {
                                this.new_menu.button[i] = {
                                    "name": this.menu.button[i].name,
                                    "sub_button": _sub_button
                                };
                            } else if (this.menu.button[i].type == 'view') {
                                this.new_menu.button[i] = {
                                    "name": this.menu.button[i].name,
                                    "sub_button": _sub_button
                                };
                            }
                        } else {
                            if (this.menu.button[i].type == 'click') {
                                this.new_menu.button[i] = {
                                    "type": this.menu.button[i].type,
                                    "name": this.menu.button[i].name,
                                    "key": this.menu.button[i].key
                                };
                            } else if (this.menu.button[i].type == 'view') {
                                this.new_menu.button[i] = {
                                    "type": this.menu.button[i].type,
                                    "name": this.menu.button[i].name,
                                    "url": this.menu.button[i].url
                                };
                            }
                        }
                    }
                    console.log(this.new_menu);
                    //                $('#result').html(this.new_menu);
                    console.log(JSON.parse(JSON.stringify(this.new_menu)));
                    console.log(JSON.stringify(this.new_menu));
                    $('#result').html(JSON.stringify(this.new_menu));
                },
                menu_selected: function (name, index) {
                    //console.log(name);
                    //console.log(index);
                    //console.log(this.$el);
                    //console.log($(e.srcElement));
                    //console.log($(e.target));
                    this.showDelBtnType = 1;
                    this.activeMenuName = name;
                    this.activeMenuIndex = index;
                    this.activeMenuItemName = '';
                    this.activeMenuItemIndex = '';

                    //补全数据,无数据也要为空
                    this.menu_data_completing();

                    if (this.menu.button[this.activeMenuIndex].sub_button.length > 0) {
                        this.showMenuContentType = '';
                    } else {
                        this.showMenuContentType = this.activeMenuBtnType();
                    }
                },
                menu_item_selected: function (name, index) {
                    this.showDelBtnType = 2;
                    this.activeMenuItemName = name;
                    this.activeMenuItemIndex = index;

                    //补全数据,无数据也要为空
                    this.menu_data_completing();

                    if (this.activeMenuIndex > 0 || this.activeMenuIndex === 0) {
                        if (this.menu.button[this.activeMenuIndex].sub_button.length > 0) {
                            this.showMenuContentType = this.activeMenuBtnType();
                        }
                    }
                },
                menu_add: function () {
                    if (this.menu.button.length < 3) {
                        this.activeMenuItemIndex = '';
                        this.activeMenuItemName = '';
                        this.menu.button.push({
                            "type": "click",
                            "name": "菜单名称",
                            "key": "",
                            "url": "",
                            "sub_button": []
                        });
                        this.activeMenuIndex = this.menu.button.length - 1;
                        this.activeMenuName = '菜单名称';
                        this.showDelBtnType = 1;
                        //补全数据,无数据也要为空
                        this.menu_data_completing();
                    } else {
                        alert('最多3个一级菜单');
                    }
                },
                menu_item_add: function () {
                    if (this.menu.button[this.activeMenuIndex].sub_button.length < 5) {
                        this.menu.button[this.activeMenuIndex].sub_button.push({
                            "type": "click",
                            "name": "子菜单名称",
                            "key": "",
                            "url": "",
                            "sub_button": []
                        });
                        this.activeMenuItemIndex = this.menu.button[this.activeMenuIndex].sub_button.length - 1;
                        this.activeMenuItemName = '子菜单名称';
                        this.showDelBtnType = 2;
                        //补全数据,无数据也要为空
                        this.menu_data_completing();
                    } else {
                        alert('最多5个二级菜单');
                    }
                },
                menu_del: function () {
                    if (this.menu.button.length <= 3 && this.menu.button.length > 0) {

                        if ((this.activeMenuIndex !== 0) && (this.activeMenuIndex == this.menu.button.length - 1)) {
                            this.menu.button.splice(this.activeMenuIndex, 1);
                            this.activeMenuIndex -= 1;
                        } else if (this.activeMenuIndex == 0) {
                            this.menu.button.splice(this.activeMenuIndex, 1);
                            this.activeMenuIndex = 0;
                        } else {
                            this.menu.button.splice(this.activeMenuIndex, 1);
                        }

                        if (this.menu.button.length == 0) {
                            this.activeMenuIndex = '';
                            this.activeMenuName = '';
                            this.activeMenuItemIndex = '';
                            this.activeMenuItemName = '';
                        }
                    }
                },
                menu_item_del: function () {
                    if (this.menu.button[this.activeMenuIndex].sub_button.length <= 5 && this.menu.button[this.activeMenuIndex].sub_button.length > 0) {
                        if (this.activeMenuItemIndex == this.menu.button[this.activeMenuIndex].sub_button.length - 1) {
                            this.menu.button[this.activeMenuIndex].sub_button.splice(this.activeMenuItemIndex, 1);
                            this.activeMenuItemIndex -= 1;
                        } else if (this.activeMenuItemIndex == 0) {
                            this.menu.button[this.activeMenuIndex].sub_button.splice(this.activeMenuItemIndex, 1);
                            this.activeMenuItemIndex = 0;
                        } else {
                            this.menu.button[this.activeMenuIndex].sub_button.splice(this.activeMenuItemIndex, 1);
                        }

                        if (this.menu.button[this.activeMenuIndex].sub_button.length == 0) {
                            this.activeMenuIndex = '';
                            this.activeMenuName = '';
                            this.activeMenuItemIndex = '';
                            this.activeMenuItemName = '';
                        }
                        this.showMenuContentType = this.activeMenuBtnType();
                    }
                },
                radio_label_selected: function (val) {
                    this.showMenuContentType = val;
                    if (val == 1) {
                        this.setType('click');
                    } else if (val == 2) {
                        this.setType('view');
                    }
                },
                content_msg_tab_nav: function (val) {
                    this.showMenuContentMsgType = val;
                },
                activeMenuType: function () {
                    if (this.activeMenuIndex !== '' && this.activeMenuItemIndex !== '') {
                        //子菜单、二级菜单
                        return 2;
                    } else if (this.activeMenuIndex !== '' && this.activeMenuItemIndex === '') {
                        //一级菜单
                        return 1;
                    } else {
                        return 0;
                    }
                },
                activeMenuBtnType: function () {
                    if (this.activeMenuType() === 1) {
                        //一级菜单
                        switch (this.menu.button[this.activeMenuIndex].type) {
                            case 'click':
                                return 1;
                            case 'view':
                                return 2;
                            default:
                                return 0;
                        }
                    } else if (this.activeMenuType() === 2) {
                        //子菜单、二级菜单
                        switch (this.menu.button[this.activeMenuIndex].sub_button[this.activeMenuItemIndex].type) {
                            case 'click':
                                return 1;
                            case 'view':
                                return 2;
                            default:
                                return 0;
                        }
                    } else {
                        return '';
                    }
                },
                isSet: function (variable) {
                    if (typeof(variable) != 'undefined') {
                        return true;
                    } else {
                        return false;
                    }
                },
                setType: function (type) {
                    console.log(this.activeMenuIndex);
                    if (this.activeMenuType() == 1) {
                        this.menu.button[this.activeMenuIndex].type = type;
                    } else if (this.activeMenuType() == 2) {
                        this.menu.button[this.activeMenuIndex].sub_button[this.activeMenuItemIndex].type = type;
                    }
                },
                setNemMenuObj: function () {
                    for (var i = 0; i < this.menu.button.length; i++) {
                        if (this.menu.button[i].sub_button.length > 0) {
                            this.new_menu.push({
                                "name": this.menu.button[i].name,
                                "sub_button": this.menu.button[i].sub_button
                            });
                        } else {
                            if (this.menu.button[i].type == 'click') {
                                this.new_menu.push({
                                    "name": this.menu.button[i].name,
                                    "type": this.menu.button[i].type,
                                    "key": this.menu.button[i].key,
                                    "sub_button": []
                                });
                            } else if (this.menu.button[i].type == 'view') {
                                this.new_menu.push({
                                    "name": this.menu.button[i].name,
                                    "type": this.menu.button[i].type,
                                    "url": this.menu.button[i].url,
                                    "sub_button": []
                                });
                            }
                        }
                    }
                }
            }
        })